<template>
    <zt-dialog v-model="visible" title="详情" :loading="isLoading" :showFooter="true" :showFullScreen="false" width="60%"
        height="600px" :showConfirm="false">
        <el-descriptions title="基本信息" :column="2">
            <el-descriptions-item label="用户名称:">{{ ruleForm.userName }}</el-descriptions-item>
            <el-descriptions-item label="手机号:">{{ ruleForm.mobile }}</el-descriptions-item>
            <el-descriptions-item label="登录账号:">{{ ruleForm.accountName }}</el-descriptions-item>
            <el-descriptions-item label="身份证号:">{{ ruleForm.idcard }}</el-descriptions-item>
            <el-descriptions-item label="出生日期:">{{ ruleForm.birthdate }}</el-descriptions-item>
            <el-descriptions-item label="性别:">{{ ruleForm.sex == 1 ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="所属部门:" v-if="ruleForm.depIdArr">
                {{ ruleForm.depIdArr.join(' / ') }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="已有角色" :column="1">
            <el-descriptions-item>
                <el-table :data="ruleForm.rolesList" style="width: 100%" border>
                    <el-table-column prop="roleName" label="角色名称" align="center" />
                    <el-table-column label="角色状态" align="center">
                        <template #default="scope">
                            <el-tag class="ml-2" type="success" v-if="scope.row.activated">激活</el-tag>
                            <el-tag class="ml-2" type="danger" v-if="!scope.row.activated">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center" />
                </el-table>
            </el-descriptions-item>
        </el-descriptions>
    </zt-dialog>
</template>

<script setup>
import ztDialog from '@/components/zt-dialog/index.vue'
import { apiGetDepartmentTree } from "@/api/common/api.js"

const isLoading = ref(false)
const props = defineProps({
    // 当前类型
    currentType: {
        type: String,
        default: 'add'
    },
    // 控制弹窗显示
    visible: {
        type: Boolean,
        default: false
    },
    // 传递过来的值
    objectValue: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const emit = defineEmits(['success', 'update:modelValue'])
const ruleForm = reactive({
    userName: '',// 用户名称
    mobile: '',// 手机号
    accountName: '',// 登录账号
    password: '',// 登录密码
    idcard: '',// 身份证号
    sex: 1,//性别(代码 0:女/1:男)
    birthdate: '',//出生日期
    depIdArr: '',// 部门id数组
    rolesList: []
})


// 子组件定义自己的visible
const visible = computed({
    get: () => props.visible,
    set: (value) => {
        // 清除表单字段值
        Object.keys(ruleForm).forEach(key => {
            if (key == 'sex') {
                ruleForm[key] = 1 //默认设置为男
            } else {
                ruleForm[key] = '';
            }
        });
        // ruleFormRef.value.resetFields()
        emit('update:modelValue', value)
    },
})

// 监听传递过来的值 赋值
watch(() => props.objectValue, (e) => {
    if (e) {
        ruleForm.birthdate = e.birthdate
        ruleForm.mobile = e.mobile
        ruleForm.userName = e.userName
        ruleForm.accountName = e.accountName
        ruleForm.idcard = e.idcard
        ruleForm.sex = e.sex
        ruleForm.depId = e.depId
        ruleForm.rolesList = e.roles
    }
}, {
    deep: true,
    immediate: true
})


// 获取部门列表树数据
function getDeptTreeData() {
    apiGetDepartmentTree({}).then(res => {
        if (res.success) {
            let list = convertToOptions(res.data)
            ruleForm.depIdArr = getAllParentValues(list, ruleForm.depId).reverse()
        }
    })
}
// 处理数据
function convertToOptions(data) {
    const options = [];
    function traverse(node) {
        const option = {
            value: node.depId,
            label: node.depName,
            parentId: node.parentId,
        };
        if (node.children && node.children.length > 0) {
            option.children = node.children.map(child => traverse(child));
        }
        return option;
    }
    options.push(traverse(data));
    return options;
}
// 数据处理 获取父级部门名称
function getAllParentValues(arrs, value) {
    for (let i = 0; i < arrs.length; i++) {
        const item = arrs[i];
        if (item.children) {
            // 如果当前节点有子节点，则递归查找子节点
            const parentValues = getAllParentValues(item.children, value);
            if (parentValues.length > 0) {
                // 如果找到了对应的父级value值，则将当前节点的value值添加到父级value值数组中
                parentValues.push(item.label);
                return parentValues;
            }
        }
        if (item.value === value) {
            // 如果当前节点的value值等于目标值，则返回当前节点的value值
            return [item.label];
        }
    }
    // 如果未找到对应的父级value值，则返回空数组
    return [];
}


getDeptTreeData()

</script>

<style lang='scss' scoped></style>
<style lang="scss">
.el-input__wrapper {
    width: 100%;
}
</style>